<template>
  <div class="home">
  	<div id="lefttop">
  		<div class="circle"></div>
  		<div class="circle"></div>
  		<div class="circle"></div>
  	</div>
  	<div id="leftbott">
		  		<ul>
		        <li>
		            <i class="fa fa-camera-retro"></i>
		            <span>彩票资讯</span>
		        </li>
		        <li>
		           <i class="fa fa-university" aria-hidden="true"></i>
		            <span>彩票管理</span>
		        </li>
		        <li>
		            <i class="fa fa-cog" aria-hidden="true"></i>
		            <span>彩票工具</span>
		        </li>
		        <li>
		            <i class="fa fa-bar-chart" aria-hidden="true"></i>
		            <span>数据图表</span>
		        </li>
		    	</ul>
	    	
  	</div>
    <div id="denglu">
    	<p class="biao">可米彩票</p>
    	<el-form :model="userInfo" :rules="rules" ref="userInfo">
    		<el-form-item prop="accountName">
	    		<el-input class="accname" type="text" v-model="userInfo.accountName"/>
	    	</el-form-item>
	    	<el-form-item prop="password">
	    		<el-input class="pword" type="password" v-model="userInfo.password"/>
	    	</el-form-item>
	    	</br>
	    	<el-switch class="pwhuanchun"
	        active-color="#13ce66"
	        inactive-color="#ff4949"
	        v-model="remember">
		    </el-switch>
		    <span style="color:white;margin-left:10px">记住密码</span>
	    	<button class="denlu" @click="signin">登录</button>
  		</el-form>
  	</div>
  </div>
</template>

<script>
export default{
		data(){
			return {
				userInfo:{},
				rules:{
					accountName:[
						{required:true,message:"用户名不能为空",trigger:"blur"},
						{min:2,max:20,message:"用户名不能少于两个字符",trigger:"blur"}
					
					],
					password:[
						{required:true,message:"密码不能为空",trigger:"blur"},
						{min:5,max:20,message:"密码不能少于5位数",trigger:"blur"}
					
					]
				},
				remember:true
			}
		},
		methods:{
			signin(){
				this.$refs["userInfo"].validate((valid)=>{
					if(valid){
						this.$http.post(this.$api.signin,this.userInfo)
						.then((resp)=>{
							if(resp.data.success){
								localStorage.setItem("remember",this.remember);
								localStorage.setItem("token",resp.data.token);
								localStorage.setItem("response",JSON.stringify(resp.data.response));
								if(this.$route.query.redirect){
									this.$router.push(this.$route.query.redirect);
								}else{
									this.$router.push("/Home")
								}
							}else{
								this.$message.error("登录失败，请重新登录");
							}
						})
					}else{
						return false;
					}
				})
				
			}
		},
		created(){
			console.log(this.$api.signin);
		}
	}
</script>
<style lang="scss">
	.home{
		width: 100%;
		height: 100%;
		background-image: url(../apis/assets/loginBG.jpg);
		background-size: cover;
		
	}
	#lefttop{
		width: 70%;
		height: 70%;
		
		.circle{
			width: 150px;
			height: 150px;
			border-radius: 50%;
			&:nth-child(1){
        position: absolute;
        top: 20%;
        left:33%;
        background:rgba(240, 197, 158, 0.6);
	    }
	    &:nth-child(2){
	        position: absolute;
	        top: 35%;
	        left: 38%;
	        background:rgba(85, 212, 191,0.6);
	    }
	    &:nth-child(3){
	        position: absolute;
	        left: 28%;
	        top: 35%;
	        background:rgba(82, 89, 197,0.6);
	    }
		}
	}
	#leftbott{
		width: 70%;
		height: 30%;
		
		ul {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    flex-direction:row;
	    justify-content: center;
	    li {
	    	margin-top: 20px;
        margin-left: 80px;
        display: flex;
        flex-direction: column;
        color: rgba(255, 255, 255, 0.5);
        span {
            margin-top:20px;
            text-align: center;
        }
        i {
            font-size: 60px;
        }
	    }
	}
	}
	#denglu{
		width: 30%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		.biao{
			font-size: 60px;
			color: blueviolet;
			margin-top: 20%;
		}
		.accname,.pword{
			
			
			width: 100%;
			
			line-height: 25px;
			font-size: 20px;
		}
		.pword{
			margin-top: 10%;
		}
		
		.denlu{
			margin-top: 10%;
			
			margin-bottom: 40%;
			width: 100%;
			height: 40px;
			border: 0;
			background: lightseagreen;
		}
	}

	
	
</style>